<template>
  <div>
    <el-dialog
      title="修改关联人员"
      v-model="showDialog"
      :before-close="close"
      @close="close"
      width="800px"
      append-to-body
    >
      <AuthorizedOfficer
        ref="authRef"
        :officer="_officer"
        :currentGroup="currentGroup"
        @confirmBtnPerson="confirmBtnPerson"
      ></AuthorizedOfficer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          @click="
            () => {
              emits('submit')
            }
          "
        >
          保存
        </el-button>
        <el-button size="small" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="AuthorizedOfficerDialog">
import AuthorizedOfficer from './authorizedOfficer.vue'
const { proxy } = getCurrentInstance()
const store = useStore()
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  officer: {
    type: Object,
    default: () => {
      return {}
    },
  },
  currentGroup: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const emits = defineEmits(['submit', 'close', 'editPerson'])
const showDialog = computed({
  get() {
    return props.open
  },
  set(val) {
    emits('update:open', val)
  },
})

function close() {
  proxy.$refs.authRef.clearHandle()
  proxy.$refs.authRef.rightValue = []
  proxy.$refs.authRef.data = []
  //proxy.$refs.authRef.$refs.rightTree.clearHandle()
  emits('close')
}
const _officer = computed(() => {
  return props.officer
})

function confirmBtnPerson(val) {
  emits('editPerson', val)
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 45px 0 0 0;
}
</style>
